<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>九宫格-第四步</title>
    <link rel="stylesheet" href="./reset.css">
    <style media="screen">
      body{
        padding: 50px;
      }
    </style>
  </head>
  <body>
      <ul class="grid">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
      <style media="screen">
        .grid{
          display: flex;
          flex-wrap: wrap;
          width: 300px;
        }
        .grid li{
          width: 100px;
          height: 100px;
          line-height: 100px;
          text-align: center;
          border: 4px solid #ccc;
          box-sizing: border-box;
          margin-left: -4px;
          margin-top: -4px;
        }
        .grid li:nth-child(3n+1){
          margin-left: 0;
        }

        .grid li:hover{
          border-color: red;
          z-index: 2
        }

      </style>
  </body>
</html>
